<template>
  <div class="it-body">
    <div>
      <user-header ref="header"></user-header> <!--ref注册user-header组件-->
    </div>
    <div class="userBody">
      <user-body @clickSearchUser="headerSearchUser"></user-body>  <!--通过clickSearchUser事件触发父组件中的headerSearchUser是方法-->
    </div>
  </div>
</template>

<script>
  import userBody from './component/body';
  import userHeader from './component/header';

  export default {
    name: 'userAll',
    components:{
      userBody: userBody,
      userHeader: userHeader,
    },
    methods:{
      headerSearchUser(){     //父组件方法，调用header中的searchUser方法。
        this.$refs.header.searchUser();
      },
    },
  }

</script>

<style scoped>
  .it-body{
    margin: 10px 10px;
    height: auto;
    width: auto;
    /*background-color: #d3dce6;*/
  }
  .userBody{
    /*margin-top: 10px;*/
  }


</style>
